<style lang="less" scoped>
.setting {
    padding: 50px;
    // text-align: center;
}
.opt {
    padding-top: 20px;
    span {
        font-weight: bold;
    }
}
</style>
<template>
    <div class="setting">
        <div class="container">
            <div class="opt">
                <!-- <span>页面宽度：</span> -->
                <el-row>
                    <el-button @click="changeMaxWidthFn('100%')" type="danger" plain>通栏显示(100%)</el-button>
                    <el-button @click="changeMaxWidthFn('1600px')" type="primary">1600px</el-button>
                    <el-button @click="changeMaxWidthFn('1400px')" type="success">1400px</el-button>
                    <el-button @click="changeMaxWidthFn('1200px')" type="danger">1200px</el-button>
                </el-row>
            </div>

            <div class="opt">
                <!-- <span>字体大小：</span> -->
                <el-row>
                    <el-button @click="changeFontSizeFn('16px')" type="danger" >默认字体大小(16px)</el-button>
                    <el-button @click="changeFontSizeFn('18px')" type="primary" plain>18px</el-button>
                    <el-button @click="changeFontSizeFn('22px')" type="danger" plain>22px</el-button>
                    <el-button @click="changeFontSizeFn('24px')" type="warning" plain>24px</el-button>
                    <el-button @click="changeFontSizeFn('50px')" type="danger" plain>50px</el-button>
                </el-row>
            </div>

            <div class="opt">
                <!-- <span>字体名称：</span> -->
                <el-row>
                    <el-button @click="changeFontFamilyFn('Arial, Helvetica, sans-serif')" type="danger" plain>默认字体(Arial, Helvetica, sans-serif)</el-button>
                    <el-button @click="changeFontFamilyFn('宋体')" type="primary">宋体</el-button>
                    <el-button @click="changeFontFamilyFn('黑体')" type="success">黑体</el-button>
                    <el-button @click="changeFontFamilyFn('微软雅黑')" type="danger">微软雅黑</el-button>
                </el-row>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        }
    },
    methods: {
        // 修改界面宽度
        changeMaxWidthFn(value) {
            this.$store.commit("changeMaxWidth", value)
        },
        // 修改界面字体大小
        changeFontSizeFn(value) {
            this.$store.commit("changeFontSize", value)
        },
        // 修改界面字体类型
        changeFontFamilyFn(value) {
            this.$store.commit("changeFontFamily", value)
        }
    }
}
</script>